<template>
  <view class="home-wrap">
    <i-statusBar></i-statusBar>
    <view class="body">
      <view class="search-box">
        <view class="search-data">
          <image src="../../static/images/home_logo.png" />
          <image
            @click="toSearch"
            src="../../static/images/home_searhc_icon.png"
            class="search_icon"
          />
        </view>
      </view>
      <view style="height: 24rpx"></view>
      <homeSwiper :list="bannerList"></homeSwiper>
      <view class="tj_bg">
        <view class="tj_title">为你推荐</view>
        <view class="tj_list">
          <view class="text">友电之星—开启专属充电之旅！ </view>
          <view class="tj_item" @click="toGoodsDetail(productList)">
            <view class="tj_item_img">
              <image :src="productList.productMainPic" mode="aspectFill" />
            </view>
            <view class="tj_item_title">{{ productList.productName }}</view>
          </view>
        </view>
      </view>
      <view>
        <i-clientItem
          v-for="item in articleList"
          :key="item.id"
          :data="item"
          @click="handleClick(item)"
        ></i-clientItem>
      </view>
    </view>
    <i-more :status="status"></i-more>
  </view>
  <uni-popup ref="popup" type="center" :mask="false">
    <view class="notice">
      <view class="notice_title">
        <text>{{ noticeData.configName }}</text>
      </view>
      <view class="notice_content">
        <image @click="previewImage" :src="noticeData.configValue" mode="widthFix" />
      </view>
      <view class="notice_btn">
        <i-buttons
          padding="12rpx 38rpx"
          radius="16rpx"
          size="24"
          bgColor="#FB652E"
          color="#fff"
          @click="closePopup"
          >好的</i-buttons
        >
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import homeSwiper from "./components/homeSwiper.vue";
import {
  getAd,
  getProductList,
  getArticleList,
  getConfigByKey,
  getAppVersion,
} from "../../api/index";
import { onMounted, reactive, ref } from "vue";
import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";

const bannerList = ref<any>([]);
const productList = ref<any>({});
const articleList = ref<any>([]);
const noticeData = ref<any>({});
const formData = reactive({
  ypageNum: 1,
  ypageSize: 1,
  total: 0,
});
const popup = ref<any>(null);
const status = ref<string>("nomore");

onMounted(() => {
  getConfig();
  // #ifdef APP-PLUS
  checkAppVersion();
  // #endif
  
});

onShow(() => {
  getBanner();
  getProductListData();
  getArticleListData();
});

const previewImage = () => {
  uni.previewImage({
    urls: [noticeData.value.configValue],
  });
};

const getBanner = async () => {
  const { data } = await getAd("0");
  bannerList.value = data;
};
const getProductListData = async () => {
  const data = await getProductList(formData);
  productList.value = data.rows[0];
  formData.total = data.total;
};
const getArticleListData = async () => {
  const data = await getArticleList({ ...formData, ypageSize: 20 });
  articleList.value = data.rows
};
const toSearch = () => {
  uni.navigateTo({
    url: "/pages/views/search",
  });
};

const toGoodsDetail = (item: { id: any }) => {
  uni.navigateTo({
    url: `/pages/views/goodsDetail?id=${item.id}`,
  });
};

const refresh = () => {
  console.log("refresh");
};

const handleClick = (item) => {
  console.log(item);
  uni.navigateTo({
    url: `/pages/index/xwDetail?id=${item.id}`,
  });
};

const getConfig = async () => {

  const { data } = await getConfigByKey("sys.app.notice");
  if (data.configName === "公告") {
    noticeData.value = data;
  popup.value.open();
  }
};

const closePopup = () => {
  popup.value.close();
};

const checkAppVersion = async () => {
  let appVersion = uni.getStorageSync("appVersion");
  if (!appVersion) {
    // @ts-ignore
    appVersion = plus.runtime.versionCode;
  }

  const { code, data } = await getAppVersion();
  if (code === 200) {
    if (appVersion >= data.appVersion) {
      return;
    }

    uni.showModal({
      title: "发现新版本",
      content: data.content,
      confirmText: "立即更新",
      confirmColor: "#a8700d",
      cancelText: "下次再说",
      showCancel: !!data.forcedUpdate,
      success: (res) => {
        if (res.confirm) {
          uni.showLoading({
            title: "下载中...",
            mask: true,
          });

          uni.downloadFile({
            url: data.url,
            success: (file) => {
              uni.hideLoading();
              uni.showLoading({
                title: "安装中...",
                mask: true,
              });

              // @ts-ignore
              plus.runtime.install(
                file.tempFilePath,
                {
                  force: false,
                },
                () => {
                  uni.showToast({
                    title: "更新成功！",
                    icon: "none",
                    duration: 1000,
                  });
                  uni.setStorageSync("appVersion", data.appVersion);
                  setTimeout(() => {
                    uni.hideLoading();
                    // @ts-ignore
                    plus.runtime.restart();
                  }, 1000);
                },
                (e: any) => {
                  uni.showToast({
                    title: "安装失败，" + e.message,
                    icon: "none",
                  });
                  uni.hideLoading();
                }
              );
            },
            fail: () => {
              uni.showToast({
                title: "下载失败",
                icon: "none",
              });
              uni.hideLoading();
            },
          });
        }
      },
    });
  }
};

onPullDownRefresh(()=> {
  // uni.startPullDownRefresh();
  getBanner();
  getProductListData();
  getArticleListData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
}) 
</script>
<style lang="scss" scoped>
.home-wrap {
  width: 100%;
  height: 100%;
  background: url(../../static/images/user_bg.png) top center no-repeat;
  background-size: 100% 580rpx;
  background-position: top;
  background-color: #f5f5f5;
  .body {
    width: calc(100% - 48rpx);
    margin: 0 auto;
  }
  .search-box {
    width: 100%;
    height: 88rpx;
    position: relative;
    box-sizing: border-box;
    .search-data {
      width: 100%;
      height: calc(88rpx + var(--status-bar-height));
      position: fixed;
      left: 0;
      top: 0;
      @include flexRS;
      align-items: flex-end;
      z-index: 100;
      padding: 0 32rpx;
      box-sizing: border-box;
      background: url(../../static/images/user_bg.png) top center no-repeat;
      background-size: 100% 580rpx;
      // padding-top: calc(var(--status-bar-height));

      image {
        width: 228rpx;
        height: 64rpx;
      }
      .search_icon {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .tj_bg {
    width: 100%;
    height: 540rpx;
    background: url(../../static/images/tj_bg.png) center center no-repeat;
    background-size: 100% 100%;
    border-radius: 16rpx;
    margin-top: 24rpx;
    padding: 48rpx;
    box-sizing: border-box;
    overflow: hidden;
    .tj_title {
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
      font-weight: bold;
      font-style: italic;
    }
    .tj_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 22rpx;
      .text {
        margin: 12rpx 0 20rpx 0;
        color: #ffffff;
      }
      .tj_item {
        width: 100%;
        height: 280rpx;
        background-color: #fff;
        padding: 24rpx;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tj_item_img {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
        }
        .tj_item_title {
          font-size: 24rpx;
          color: #000000;
          font-weight: 500;
          margin-top: 16rpx;
        }
      }
    }
  }
}
.notice {
  padding: 24rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 16rpx;

  .notice_title {
    font-size: 24rpx;
    color: #000000;
    font-weight: 500;
    margin-bottom: 16rpx;
  }
  .notice_content {
    image {
      width: 480rpx;
      // height: 200rpx;
    }
    margin-bottom: 32rpx;
  }
}
</style>
